<template>
    <div class="flex flex-wrap justify-between job-cont">
        <div class="job-item" v-for="item in joblist" :key="item.objectId">
            <div class="brand flex align-center">
                <img :src="item.brandLogo" alt="">
                {{item.brandName}}
            </div>
            <h2 class="fs-28">{{item.jobName}}</h2>
            <p class="fs-22 loc">{{item.cityName}} · {{item.areaDistrict}}</p>
            <div class="fs-22">
                <i class="iconfont "></i>
                {{item.salaryDesc}}
            </div>
        </div>
    </div>
</template>

<script>
    import {stuGet,jobGet} from '@/api/job.js'
    export default {
        data() {
            return {
                joblist: []
            }
        },
        created () {
            // stuGet().then(res=>{
            //     console.log(res);
            // })
            jobGet().then(res=>{
                console.log(res);
                this.joblist = res.data.results
            })
        },
    }
</script>

<style lang="scss" scoped>
.job-cont{
    padding: 2rem;
}
.job-item{
    width: 34.4rem;
    height: 29.2rem;
    padding: 3.2rem;
    box-sizing: border-box;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    margin-bottom: 2rem;
    .brand{
        font-size: 2.4rem;
        img{
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
        }
    }
    .fs-28{
        margin: 3rem 0;
    }
    .loc{
        margin-bottom: 4rem;
    }
}
</style>